<template>
  <div class="push-log-detail w-full h-full display-flex-column" style="overflow: hidden">
    <a-table
      :loading="isTableLoading"
      class="dist-simple-table w-full"
      :columns="columns"
      :data-source="dataList"
      :pagination="pagination"
      :scroll="{ x: true, y: 700 }"
    >
      <template slot="sourceRender" slot-scope="text,record">
        <span :title="record.SOURCE" class="item-title" >{{ text === 'investment_three_new' ? '新项目' : '老项目' }}</span>
      </template>
      <template slot="stateRender" slot-scope="text,record">
        <span :title="record.STATE" class="item-title" v-if="text===-1" style="color: red"><b>失败</b></span>
        <span :title="record.STATE" class="item-title" v-if="text===0" style="color: dodgerblue">接件</span>
        <span :title="record.STATE" class="item-title" v-if="text===1" style="color: green">成功</span>
        <span :title="record.STATE" class="item-title" v-if="text===2" style="color: yellow">执行中</span>
        <span :title="record.STATE" class="item-title" v-if="text===3" style="color: slategrey">不处理</span>
      </template>
      <template slot="messageTypeRender" slot-scope="text,record">
        <div class="stage-item display-flex" v-for="(item, key) in messageTypeList" :key="key">
          <span :title="record.MESSAGETYPE" class="item-title" v-if="item.code === text">{{ item.value }}</span>
        </div>
      </template>
      <template slot="operate" slot-scope="text,record">
        <div class="display-flex">
          <a-button type="primary" @click="rePullDataFromInv(record)">重拉</a-button>&nbsp;&nbsp;
          <!--<a-button type="default" @click="compareWithInv(record)">对比</a-button>-->
        </div>
      </template>
    </a-table>
  </div>
</template>
<script>
import sqlService from '@/api/sqlService'
import pushLogService from '@/api/pushLogService'

const columns = [
  {
    title: '项目代码',
    dataIndex: 'PROJECTCODE',
    width: '20%',
    align: 'center'
  },
  {
    title: '3.0统一办件号',
    dataIndex: 'UNIQUENUM',
    width: '20%',
    align: 'center'
  },
  {
    title: '消息类型',
    dataIndex: 'MESSAGETYPE',
    width: '8%',
    align: 'center',
    scopedSlots: { customRender: 'messageTypeRender' }
  },
  {
    title: '状态',
    dataIndex: 'STATE',
    width: '5%',
    align: 'center',
    scopedSlots: { customRender: 'stateRender' }
  },
  {
    title: '新旧项目',
    dataIndex: 'SOURCE',
    width: '8%',
    align: 'center',
    scopedSlots: { customRender: 'sourceRender' }
  },
  {
    title: '行政区划',
    dataIndex: 'AREACODE',
    width: '8%',
    align: 'center'
  },
  {
    title: '处理结果',
    width: '20%',
    dataIndex: 'RESPONSE',
    align: 'left'
  },
  {
    title: '操作',
    dataIndex: 'operate',
    width: '80px',
    scopedSlots: { customRender: 'operate' }
  }
]
export default {
  name: 'MessageLogDetail',
  props: {},
  data () {
    return {
      selectedTab: this.$parent.selectedTab,
      isTableLoading: false,
      columns: columns,
      pagination: {
        pageSize: 10, // 默认每页显示数量
        total: 0,
        current: 1,
        showSizeChanger: true, // 显示可改变每页数量
        showTotal: (total) => `共${total}条数据`, // 显示总数
        onChange: (current, pageSize) => {
          this.pagination.current = current
          this.pagination.pageSize = pageSize
          this.loadData(this.preParams)
        }
      },
      dataList: [],
      preParams: {},
      messageTypeList: [
        { code: '1', value: '项目申报' },
        { code: '2', value: '项目变更' },
        { code: '3', value: '事项申报' },
        { code: '4', value: '前置事项办结导致事项材料变更' },
        { code: '5', value: '补齐补正导致事项材料变更' },
        { code: '6', value: '前置事项办结(建数对接使用)' },
        { code: '7', value: '核准备案审核备事项办结且项目国标行业包含\'采矿业\',\'制造业\',\'电力、热力、燃气及水生产和供应业\'推送给环保部门' },
        { code: '8', value: '申请变更' },
        { code: '10', value: '申请注销' },
        { code: '11', value: '申请延期' },
        { code: '12', value: '申请中止' },
        { code: '13', value: '申请恢复' },
        { code: '14', value: '项目注销' },
        { code: '15', value: '变更或延期时的补齐补正提交' },
        { code: '16', value: '承诺制行政许可撤销' },
        { code: '17', value: '非投资事项申报' },
        { code: '18', value: '非投资材料补正' },
        { code: '101', value: '联合验收事项申报' },
        { code: '102', value: '联合验收补齐补正' }
      ]
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    /*async compareWithInv (record) {
      console.log('====record:', record)
      const buttons = [
        { name: '关闭', cb: 'close', type: 'primary' }
      ]
      this.$dialog({
        title: '对比',
        width: '98%',
        height: '100%',
        maskClosable: false,
        confirmLoading: false,
        bodyStyle: {
          padding: '5px',
          height: '520px'
        },
        button: buttons,
        content: () => import('@v/investmentOnline/interfaceMonitor/detail/CompareInvItemInfo.vue'),
        props: {
          record: record
        },
        on: {
          async close () {}
        }
      })
    },*/
    async rePullDataFromInv (record) {
      if (record.isLoading) {
        return
      }
      const _this = this
      // 判断数据是否存在
      if (record.STATE + '' === '1') {
        _this.$confirm({
          title: '提示',
          content: '数据已同步，是否继续执行此操作？',
          okText: '同步',
          cancelText: '取消',
          onOk: async () => {
            await pushLogService.saveInvestmentProjectRecordMultiThread({ recId: record.ID })
            record.isLoading = true
            this.postMessageToOpener('_REFRESH_TODO_BOX_')
          },
          onCancel: () => {}
        })
      } else {
        _this.$confirm({
          title: '提示',
          content: '<span>是否执行同步？</span>',
          okText: '确认',
          cancelText: '取消',
          onOk: async () => {
            await pushLogService.saveInvestmentProjectRecordMultiThread({ recId: record.ID })
            record.isLoading = true
            this.postMessageToOpener('_REFRESH_TODO_BOX_')
          },
          onCancel: () => {}
        })
      }
    },
    async loadData (params = {}, toFirst) {
      this.selectedTab = this.$parent.tab
      this.preParams = params
      if (toFirst) {
        this.pagination.current = 1
      }
      this.isTableLoading = true
      if (this.selectedTab !== '投资消息') {
        console.log('其他扩展类型: ', this.selectedTab)
        this.isTableLoading = false
        return
      }
      const difSqlConfigName = 'listReceiveMessageLog'
      const sqlParam = {
        sqlConfigName: difSqlConfigName,
        pageIndex: this.pagination.current,
        pageSize: this.pagination.pageSize,
        params: Object.assign({}, params)
      }
      const data = await sqlService.pageQuery(sqlParam)
      const rows = data.rows
      this.pagination.total = data.total
      this.dataList = rows
      this.isTableLoading = false
    },
    init () {
      this.loadData()
    }
  }
}
</script>

<style scoped lang="less">
.push-log-detail {
  padding: 10px;

  /deep/ .dist-simple-table {
    display: flex;
    overflow: hidden;
    flex: 1;

    th {
      text-align: center;
    }

    .ant-spin-nested-loading {
      width: 100%;
      height: 100%;

      .ant-spin-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        .ant-table {
          width: 100%;
          flex: 1;
          overflow: auto;
        }
      }
    }

  }

  /deep/ .dist-simple-table {
    .stage-item {
      .item-content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

}

</style>
